<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="antd.css" />
    <link rel="stylesheet" href="helper.css" />
    <link rel="stylesheet" href="iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="sdk.js"></script>
<script type="text/javascript">
    (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
            "type": "page",
            "title": "自定义组件示例",
            "body": {
                "type": "form",
                "body": [
                    {
                        "type": "input-text",
                        "label": "用户名",
                        "name": "usename"
                    },
                    {
                        "name": "mycustom",
                        "asFormItem": true,
                        "children": ({
                                         value,
                                         onChange,
                                         data
                                     }) => (
                            <div>
                                <p>这个是个自定义组件</p>
                                <p>当前值：{value}</p>
                                <a className="btn btn-default" onClick={
                                    () => onChange(Math.round(Math.random() * 10000))
                                }>随机修改</a>
                            </div>
                        )
                    }
                ]
            }
        }
        let amisScoped = amis.embed(
            '#root',
            amisJSON,
            {
                // 这里是初始 props，一般不用传。
                // locale: 'en-US' // props 中可以设置语言，默认是中文
            },
            {
                // 下面是一些可选的外部控制函数
                // 在 sdk 中可以不传，用来实现 ajax 请求，但在 npm 中这是必须提供的
                // fetcher: (url, method, data, config) => {},
                // 全局 api 请求适配器
                // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
                //
                // requestAdaptor(api) {
                //   // 支持异步，可以通过 api.mockResponse 来设置返回结果，跳过真正的请求发送
                //   // 此功能自定义 fetcher 的话会失效
                //   // api.context 中包含发送请求前的上下文信息
                //   return api;
                // }
                //
                // 全局 api 适配器。
                // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
                // responseAdaptor(api, payload, query, request, response) {
                //   return payload;
                // }
                //
                // 用来接管页面跳转，比如用 location.href 或 window.open，或者自己实现 amis 配置更新
                // jumpTo: to => { location.href = to; },
                //
                // 用来实现地址栏更新
                // updateLocation: (to, replace) => {},
                //
                // 用来判断是否目标地址当前地址。
                // isCurrentUrl: url => {},
                //
                // 用来配置弹窗等组件的挂载位置
                // getModalContainer: () => document.getElementsByTagName('body')[0],
                //
                // 用来实现复制到剪切板
                // copy: content => {},
                //
                // 用来实现通知
                // notify: (type, msg) => {},
                //
                // 用来实现提示
                // alert: content => {},
                //
                // 用来实现确认框。
                // confirm: content => {},
                //
                // 主题，默认是 default，还可以设置成 cxd 或 dark，但记得引用它们的 css，比如 sdk 目录下的 cxd.css
                theme: 'antd'
                //
                // 用来实现用户行为跟踪，详细请查看左侧高级中的说明
                // tracker: (eventTracker) => {},
                //
                // Toast提示弹出位置，默认为'top-center'
                // toastPosition: 'top-right' | 'top-center' | 'top-left' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center'
            });
        amisScoped.updateProps({
            data: {
                myData: 'amis'
            },
            context: {
                amisUser: {
                    id: 1,
                    name: 'test user'
                }
            }
        })
        console.log(amisScoped.getComponentByName('page1.form1').getValues())
    })();
</script>
</body>
</html>